<template>
  <div class="substationCover-box">
    <div class="title">
      <span></span>
      <span @click="clickTitle">变电站覆盖情况</span>
    </div>
    <div class="main colcenterbox">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="voltageLevel" label="电压等级" width="95"></el-table-column>
        <el-table-column prop="total_num" label="座" width="60">
          <template slot-scope="scope">
            <div class="btn" @click="rowClick('null',scope.row)">{{scope.row.total_num}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="auto_num" label="全自动巡检覆盖" width="150">
          <template slot-scope="scope">
            <div class="btn" @click="rowClick('jqr',scope.row)">{{scope.row.auto_num}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="intelligent_num" label="智能管控覆盖" width="133">
          <template slot-scope="scope">
            <div class="btn" @click="rowClick('zn',scope.row)">{{scope.row.intelligent_num}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
interface objType {
  row: object;
  rowIndex: number;
}
@Component
export default class extends Vue {
  tableData = [
    // {
    //   voltageLevel: "35kV",
    //   total_num: "",
    //   auto_num: "",
    //   intelligent_num: "",
    // },
    // {
    //   voltageLevel: "110kV",
    //   total_num: "",
    //   auto_num: "",
    //   intelligent_num: "",
    // },
    // {
    //   voltageLevel: "220kV",
    //   total_num: "",
    //   auto_num: "",
    //   intelligent_num: "",
    // },
    // {
    //   voltageLevel: "500kV",
    //   total_num: "",
    //   auto_num: "",
    //   intelligent_num: "",
    // },
  ];
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 1) {
      return "row1";
    } else {
      return "row2";
    }
  }
  // 表格点击事件
  rowClick(val: any, data) {
    console.log("val:", val);
    this.$router.push({
      path: "/jointInspection/stationdetail",
      query: { bs: val, dydj: data.voltageLevel },
    });
  }
  clickTitle() {
    this.$router.push({
      path: "/jointInspection/stationdetail",
      query: {},
    });
  }
  mounted() {
    (this as any).$services
      .getBdzSum({
        method: "get",
        data: {},
      })
      .then((result: any) => {
        console.log("变电站覆盖情况:", result);
        let data = result.data;
        let tableData = [
          {voltageLevel:'35kV', total_num: 0, auto_num: 0, intelligent_num: 0 },
          {voltageLevel:'110kV', total_num: 0, auto_num: 0, intelligent_num: 0 },
          {voltageLevel:'220kV', total_num: 0, auto_num: 0, intelligent_num: 0 },
          {voltageLevel:'500kV', total_num: 0, auto_num: 0, intelligent_num: 0 },
        ];
        tableData[0].total_num = data.SW||0;
        tableData[1].total_num = data.YBY||0;
        tableData[2].total_num = data.EBE||0;
        tableData[3].total_num = data.WBW||0;
        tableData[0].auto_num = data.JQRSW||0;
        tableData[1].auto_num = data.JQRYBY||0;
        tableData[2].auto_num = data.JQREBE||0;
        tableData[3].auto_num = data.JQRWBW||0;
        tableData[0].intelligent_num = data.ZNSW||0;
        tableData[1].intelligent_num = data.ZNYBY||0;
        tableData[2].intelligent_num = data.ZNEBE||0;
        tableData[3].intelligent_num = data.ZNWBW||0;
        this.tableData = tableData;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.substationCover-box {
  width: 100%;
  height: 100%;
  background: rgba(2, 29, 84, 1);
  border: 1px solid rgba(0, 231, 255, 1);
  border-radius: 6px;
  .title {
    width: 100%;
    height: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.15rem;
    span:first-child {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      background: url("../../../../assets/img/JointInspection/title_icon.png")
        no-repeat center center;
      background-size: 100% 100%;
    }
    span:last-child {
      font-size: 18px;
      margin-left: 0.1rem;
      cursor: pointer;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 0.3rem);
    padding: 0.1rem 0.15rem;
    .btn {
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss">
.substationCover-box {
  .el-table .cell {
    font-size: 0.18rem;
    text-align: center;
    white-space: nowrap;
  }

  .el-table th > .cell {
    font-size: 0.18rem;
  }

  .el-table td,
  .el-table th {
    padding: 0.08rem 0;
    font-weight: 400;
  }

  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0px solid #ebeef5;
  }

  .el-table .row1 {
    background: rgb(41, 171, 226, 0.16);
  }

  .el-table .row2 {
    background: #021d54;
  }

  .el-table__header th {
    background: rgba(0, 180, 255, 0.4);
  }

  .tbody tr:hover {
    background: rgb(41, 171, 226, 0.4);
    cursor: pointer;
  }

  .el-table::before {
    background-color: transparent;
  }
}
</style>

